<template>
  <div v-if="detail!=0">
    <my-header></my-header>
    <div class="container">
      <div class="left">
        <div class="left-img">
          <img :src="detail[0].img_small" alt="">
        </div>
      </div>
      <div class="right">
        <div class="right-top">
        <span style="color:black;font-weight:bold;font-size:30px;margin-left:15px;">{{detail[0].title}}</span>
        <div class="right-bage">
          <div>
          <span style="font-size:20px;margin-right:35px;">价格</span>
          <span style="text-decoration: line-through;font-size:20px;">¥{{detail[0].oldprice}}</span>
          </div>
          <div style="margin-top:18px;color:red;font-weight:bold">
          <span style="font-size:20px;margin-right:14px;">活动价</span>
          <span style="font-size:26px;">¥{{detail[0].price}}</span>
          </div>
        </div>
        <div class="right-adress">
          <div><span>地址</span></div>
          <v-distpicker style="margin-left:33px"></v-distpicker>
        </div>
        <div class="right-big">
          <div class="small-one">
            <span>月销量</span>
            <span class="small-color">{{detail[0].volume}}</span>
          </div>
          <div class="small-one">
            <span>累计评价</span>
            <span class="small-color">{{detail[0].evaluate}}</span>
          </div>
          <div class="small-one">
            <span>送积分</span>
            <span class="small-color">{{detail[0].integral}}</span>
          </div>
        </div>
        </div>
        <div class="right-bottom">
          <span style="margin-top:38px">数量</span>
           <el-input-number v-model="num1" :min="1" :max="99"></el-input-number>
          <span style="margin-top:38px">库存:有货</span>
        </div>
        <div class="right-button">
          <div class="one">
            <router-link to="#"><button>立即购买</button></router-link>
          </div>
          <div class="two">
            <router-link to="#"><button @click="add">加入购物车</button></router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="tabs">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="商品详情" name="first"><img :src="detail[0].img_big" alt="" style="width:100%;"></el-tab-pane>
    <el-tab-pane label="价格说明" name="second">
      <img src="/img/detail/5.webp" alt="" style="width:100%;">
    </el-tab-pane>
  </el-tabs>
  </div>
  <my-footer style="margin-top:30px;"></my-footer>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  props:['id'],
  data(){
    return{
      "province": "",
      "city": "",
      "area": "",
      num1:1,
      activeName: 'first',
      detail:[]
    }
  },
  mounted(){
    this.axios.get(`/bookdetail?id=${this.id}`).then(result=>{
      this.detail=result.data
    })
  },
   methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      add(){
        if(this.name==null){
          this.$alert('你暂未登录请前往登录','提示')
        }else{
        this.axios.post('/shopping',`title=${this.detail[0].title}&&uname=${this.name}&&numbers=${this.num1}&&img_small=${this.detail[0].img_small}&&price=${this.detail[0].price}&&ischeck=${0}&&fid=${this.detail[0].id}`).then(result=>{
          console.log(result.data)
        })
        this.$message({
          message: '恭喜你，添加成功',
          type: 'success',
          duration:'1000'
        });
        }
      }
    },
    computed: {
    ...mapState(["name"]),
  },
}
</script>
<style scoped>
.container{
  min-width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  background-color: #fcf8f8;
  justify-content: space-between;
}
.container .left{
  width: 590px;
  height:500px;
}
.container .left .left-img{
  width: 500px;
  margin: 0 auto;
  margin-top: 20px;
}
.container .left .left-img>img{
  width: 100%;
  height: 450px;
}
.container .right{
  width: 600px;
}
.container .right .right-top{
  text-align: left;
}
.container .right .right-bage{
  height: 80px;
  margin-top: 15px;
  padding-top: 15px;
  background-image: url('/img/detail/3.webp');
}
.container .right .right-adress{
  display: flex;
  margin-top: 25px;
}
.container .right .right-adress>div{
  height: 40px;
}
.container .right .right-adress span{
  line-height: 40px;
  font-size: 20px;
}
.container .right .right-big{
  display: flex;
  justify-content: space-between;
  height: 50px;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
  margin-top: 25px;
}
.container .right .right-big .small-one{
  width: 200px;
  height: 20px;
  margin-top: 18px;
  margin-left: 5px;
  border-right:1px dotted #ccc;
  text-align: center;
}
.container .right .right-big .small-color{
  color:red;
  font-weight: bold;
}
.container .right .right-bottom{
  display: flex;
}
.container .right .right-bottom>span{
  margin-top: 32px;
  font-size: 20px;
}
.container .right .right-bottom>div{
  margin:25px 30px 0 30px;
}
.container .right .right-button{
  display: flex;
  justify-content: space-around;
  margin-top: 45px;
}
.container .right .right-button button{
  border: 0;
  background-color: #ffeded;
  width: 200px;
  color: red;
}
.container .right .right-button .one{
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  margin-left: 37px;
  background-color: #ffeded;
}
.container .right .right-button .two{
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  margin-right: 25px;
  background-color: #ffeded;
}
/* 底部选项卡 */
.el-tabs{
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
}
</style>